• 於sublime 安裝SASS與SCSS
• 下載並安裝Presors
• 於專案資料夾內新增sass資料夾，再分別丟入sublime與Prepros
  • sublime另存all.scss檔案於sass資料夾內，Prepros會自動生成一個css資料夾與all.css檔案
    

scss寫法

以.header為例

• 於左方scss編譯完後，右方css就會同步生成
• Scss是依同個class中一層層包覆寫下去的
• .header中的第二層li中還有a 連結要寫，就於第二層li內在寫入a連結設定即可。

<div class="header">
    <ul>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
    </ul>
</div>

• scss優點：避免重覆複工
  • 如果class中有名稱衝突要更改，直接於scss中更改.header名稱，css部分就會同步集體做更改。
    

sass寫法

以.header為例

• 不需任何的分號與括弧
• 縮排方式：按2下空白鍵或tab鍵
  
• 屬性內容要做縮排，否則會編譯錯誤。編譯錯誤時prepros會跳出錯誤資訊視窗。也可直接進入prepros / Log查看
  

關於sass與scss

• scss需分號與括弧 / sass不需任何的分號與括弧(要注意縮排是否正確)
• 當scss與 sass 編譯錯誤時，prepros會跳出錯誤資訊視窗，方便修改。

變數

可透過變數，來去修改你今天有用到變數的名稱。變數通常都會寫在最上方，如下方屬性有需要做修改，就不用逐行去看做修改，只要修改最上方變數的東西即可

• 環境：假如header、content、footer內的a連結都設定為紅色，但後來又想要全部改粉色。這時使用全域變數做集體更改就很方便(如下示意圖)
• 變數寫法：
  • 顏色 $linkcolor: #333333;
  • 字型大小：$font-l:18px; $font-m:16px; $font-s:14px;

$linkcolor:＃ff0000;

.header a{
    color: $linkcolor;
}
.content a{
    color: $linkcolor;
}
.footer a{
    color: $linkcolor;
}

• Bootstrap也有自己的 scss ，以顏色為例，它會設定一組自己的色碼方便後面做模組化
  • 可參閱Bootstrap的scss
    

@import用法

• 環境:有兩支檔案，分別為 _reset.scss、_index.scss要放入主檔all.scss中
  • 通常一支sass檔案只單獨做一件事情
  • _reset.scss 檔案前方的下底線，意思是要被拿來做合併用(@import入sass主檔中)，告訴程式不用單獨編譯此檔案(不會被編譯為css檔)
  • @import '檔名';　檔案名稱後方不用加scss
  • 如果與主檔all.scss放在不同資料夾寫法　@import '資料夾/檔名';
  • 對於編譯sass的reset檔案可參考洧傑老師的如何建立自己的Sass Reset CSS

@import 'reset';
@import 'index';

• all.css檔案給網頁看，all.scss主要拿來@import用，寫的程式碼都會在import裡面，這樣寫出來的東西比較完善一點

六角課堂問與答 原出處
問|prepros＋sublime 新增_reset.scss會產生_reset.css檔案(正常狀況是不會產生此檔案的)
答|在新增_reset.sass檔案後，先打入@import: "reset"，prepros就會知道這是要合併的檔案，之後要怎麼改reset.sass裡面的東西，按儲存都不會產生.css檔了

@Mixin

能幫助你記住CSS技巧讓你不再因回想原理而中斷思緒

• 可建立自己的@mixin資料庫
• CSS中有一些常使用到的技巧，例如：圖片取代文字、清除浮動解決方案、各CSS3語法瀏覽器支援解決的方案..等。
• 替CSS中常用的技巧命名，並使用@mixin 再@include(呼叫的意思)套用入屬性中。
• 以圖片取代文字為例：

//scss檔案
＠mixing hide-text{
    text-indent:101%;
    white-space:nowrap;
    overflow:hidden;
}
.header h1{
    @include hide-text;
}

/*css檔案*/
.header h1{
    text-indent:101%;
    white-space:nowrap;
    overflow:hidden;
}

@Mixin+變數

可客製化各式各樣的效果

• 客製圓形效果為例

@mixin circle($size,$bgcolor){
    border-radius:50%;
    height:$size;
    width:$size ;
    font-size:$size/ 3;
    Background:$bgcolor;
}

.white-cricle{
    @include circle(30px,#fff);
}
.black-circle{
    @include circle(51px,#000);
}

/*css檔案*/
.white-cricle{
    border-radius:50%;
    height:30px;
    width:30px;
    font-size:10px;
    Background:#fff;
}
.black-circle{
    border-radius:50%;
    height:51px;
    width:51px;
    font-size:117x;
    Background:#000;
}

@Mixin+content

客製載具斷點

• 獨立一支scss檔案grid.scss，裡面增設各個區塊的斷點
  • @content意思為今天裡面有寫程式碼就會帶到裡面去 ，所以客製化撰寫的東西都會在@content顯示出來

@mixin desktop{
    @media(max-width:1023px){
        @content
    }
}
@mixin desktop-top{
    @media(max-width:1024px){
        @content
    }
}
@mixin pad{
    @media(max-width:767px){
        @content
    }
}
@mixin iphone{
    @media(max-width:568px){
        @content
    }
}
@mixin mobile480{
    @media(max-width:480x){
        @content
    }
}
@mixin iphone5{
    @media(max-width:320px){
        @content
    }
}

• 載入all.scss

@mixin pad{
    @media(max-width:767px){
        @content
    }
}
@mixin iphone5{
    @media(max-width:320px){
        @content
    }
}

.header{
    Width:100px;
    height:100px;
    @include pad(){
      height:auot;
    }
    @include iphone5(){
      height:30px;
    }

}

• all.css 呈現方式

.header{
    Width:100px;
    height:100px; }
    @media(max-width:767px){
      .header{
      height:auot; } }
    @media(max-width:320px){
      .header{
      height:30px; } }

}

• 假設.header內的a連結要在all.scss做設定

@mixin pad{
    @media(max-width:767px){
        @content
    }
}
@mixin iphone5{
    @media(max-width:320px){
        @content
    }
}


.header{
    Width:100px;
    height:100px;
    @include pad(){
      height:auot;
    }
    @include iphone5(){
      height:30px;
    }
    a{
      color:#000;
      @include iphone5(){
        display:none;
        }
     }
}

※註-關於bootstrap sass的mixin相關用法設定可參閱bootstrap

第一次寫SCSS建議結構(all.scss)

@import "mexin";  //所有全域變數與Mixin
@import "reset";  //reset.css
@import "index";  //首頁
@import "page/..";  //內頁

接著你可以這樣寫(all.scss)

@import "mixin";  //所有全域變數與Mixin
@import "reset";  //reset.css
@import "layout";  //共同框架，第一層(例如表頭表尾的共同區塊)
@import "module";  //buttom，form，table
@import "page/index、pages1、pages2";  

※註-更多scss結構設計部分可參閱洧傑老師的Sass教學手冊導讀

工具
可使用VSCode取代sublime，並新增VSCode套件-Live Sass Compiler取代prepros |原出處
參考文章

1. VSCode - 好用插件 feat. 開發小技巧
2. SASS : VSCode 套件安裝
3. 使用VSCode外掛自動編譯SASS/SCSS
4. 如何建立自己的Sass Reset CSS
5. Sass教學手冊導讀